<template>
	<!-- 编辑代金券 -->
	<view class="">
		<view class="form">
			<view class="form-item">
				<view class="form-item-lable">
					抵扣商品：
				</view>
				<view class="form-item-value">
					<input disabled v-model="form.goods.name" type="text" placeholder="请选择抵扣商品" v-if="!isAdd">
					<picker class="fiv-picker" :value="index" range-key="name" @change="pickeChange" :range="array"
						v-if="isAdd">
						<view class="uni-input">{{array[index].name}}</view>
					</picker>
					<text class="cuIcon-unfold" v-if="isAdd"></text>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-lable">
					下单赠送（张）：
				</view>
				<view class="form-item-value">
					<input v-model="form.gift_number" type="text" placeholder="下单赠送（张）">
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-lable">
					每日限用（张）：
				</view>
				<view class="form-item-value">
					<input v-model="form.day_limit_number" type="number" placeholder="请输入每日限领（张）">
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-lable">
					过期时间：
				</view>
				<view class="form-item-value">
					<!-- <input v-model="form.expire_time" type="text" placeholder="请选择过期时间" @click="showPicker"> -->
					<uni-datetime-picker ref="picker" type="datetime" v-model="form.expire_time" @change="changeLog" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-lable">
					使用时间：
				</view>
				<view class="form-item-value">
					<!-- <input v-model="form.expire_time" type="text" placeholder="请选择过期时间" @click="showPicker"> -->
					<uni-datetime-picker ref="picker" type="datetime" v-model="form.use_time" @change="changeLog" />
				</view>
			</view>
		</view>
		<view class="btn">
			<button @click="submit()">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsListApi,
		addAVoucherApi,
		updateAVoucherApi
	} from "@/common/api.js"
	export default {
		data() {
			return {
				form: {
					goods_id: '', //商品id
					gift_number: '',
					day_limit_number: '',
					expire_time:'',
					use_time:'',
				},
				array: [],
				index: 0,
				isAdd: false,
			}
		},
		onLoad(e) {
			this.getGoodsList()
			if (e.item == "undefined") {
				this.isAdd = true
				return
			}
			console.log(JSON.parse(e.item), '进来的数据：：')
			this.form = JSON.parse(e.item)
		},
		methods: {
			changeLog(e) {
				console.log('change事件:', e);
			},
			// 获取商品列表
			getGoodsList() {
				let queryForm = {
					limit:1000,
					page:1
				}
				getGoodsListApi(queryForm).then(res => {
					this.array = res.list
					this.form.goods_id = res.list[0].id
				})
			},
			pickeChange(e) {
				console.log(e)
				this.index = e.detail.value
				this.form.goods_id = this.array[e.detail.value].id
			},
			// 新增抵用券
			add() {
				addAVoucherApi(this.form).then(res => {
					if (res.code === 200001) {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'error'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res,
						icon: 'none'
					})
				})
			},
			// 编辑抵用券
			update() {
				console.log(this.form, '修改的表单：：');
				let queryForm = {
					coupon_id: this.form.id,
					gift_number: this.form.gift_number,
					day_limit_number: this.form.day_limit_number,
					expire_time: this.form.expire_time,
					use_time: this.form.use_time
				}
				updateAVoucherApi(queryForm).then(res => {
					if (res.code === 200001) {
						uni.showToast({
							title: '编辑成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'error'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res,
						icon: 'none'
					})
				})
			},
			// 保存
			submit() {
				console.log(this.form)
				if (this.isAdd) {
					this.add()
				} else {
					this.update()
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		margin: 30rpx;
		padding: 30rpx 0;
		border-radius: 20rpx;
		background: #fff;
	}

	.form-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.form-item-lable {
		flex-shrink: 0;
		font-size: 32rpx;
		margin-right: 20rpx;
	}

	.form-item-value {
		width: 100%;
		display: flex;
		align-items: center;

		input {
			text-align: left;
			font-size: 32rpx;
			line-height: 32rpx;
			width: 100%;
			padding: 6rpx 0;
		}

		image {
			width: 20rpx;
			height: 30rpx;
			flex-shrink: 0;
		}
	}

	.fiv-picker {
		width: 100%;
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #09a0f7;
		}
	}
</style>
